<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="120px"
          class="demo-formModel"
        >
         
          <!-- 获得学历 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="获得学历" prop="hdxl">
                  <el-select
                  v-model="formModel.hdxl"
                  placeholder="请选择获得学历"
                  class="el_select"
                >
                  <el-option
                    v-for="item in educationList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
                
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="获得学历国家" prop="hdxlgj">
                <el-select
                  v-model="formModel.hdxlgj"
                  placeholder="请选择获得学历国家"
                  class="el_select"
                >
                  <el-option
                    v-for="item in cityList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="获得学历机构或院校" prop="hdxxjgmc">
                <el-input v-model="formModel.hdxxjgmc" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 所学专业 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="所学专业" prop="sxzy">
                <el-input v-model="formModel.sxzy" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入学年月" prop="rxsj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择入学年月"
                  v-model="formModel.rxsj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="毕业年月" prop="bysj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择毕业年月"
                  v-model="formModel.bysj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 学位层次 -->
          <el-row>
            <!-- <el-col :span="8">
              <el-form-item label="学位层次" prop="academicName">
                <el-select
                  v-model="formModel.academicName"
                  placeholder="请选择学位层次"
                  class="el_select"
                >
                  <el-option
                    v-for="item in schoolList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="学位授予年月" prop="xwsyny">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择学位授予年月"
                  v-model="formModel.xwsyny"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="btns">
            <el-col :span="24"> 
              <el-form-item>
              <el-button type="primary" @click="submitForm('formModel')"
                >{{btnname}}</el-button
              >
              <el-button @click="resetForm('formModel')">重置</el-button>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:"studyexp",
  data() {
    return {
      cityList: [
        { name: "中国", val: 0 },
        { name: "香港", val: 1 },
      ],
      educationList: [
        { name: "小学", val: 0 },
        { name: "初中", val: 1 },
        { name: "高中", val: 2 },
        { name: "大学", val: 3 },
      ],
      schoolList: [
        { name: "xxx学院", val: 0 },
        { name: "xxx学院", val: 1 },
      ],

      imageUrl: '',
      formModel: {
        hdxl:"",
        hdxlgj:"",
        hdxxjgmc:"",
        academicName:"",
        sxzy:"",
        rxsj:"",
        bysj:"",
        xwsyny:"",

        
      },
      rules: {
        hdxxjgmc: [
          { required: true, message: "请输入获得学历机构或院校", trigger: "blur" },
        ],
        sxzy: [
          { required: true, message: "请输入所学专业", trigger: "blur" },
        ],
        academicName: [
          { required: true, message: "请选择学位名称", trigger: "change" },
        ],
        hdxlgj: [
          { required: true, message: "请选择获得学历的国家", trigger: "change" },
        ],
        rxsj: [
          {
            type: "string",required: true,message: "请选择入学年月",trigger: "change", 
          },
        ],
        bysj: [
          {
            type: "string",required: true,message: "请选择毕业年月",trigger: "change", 
          },
        ],
        xwsyny: [
          {
            type: "string",required: true,message: "请选择学位授予年月",trigger: "change", 
          },
        ],
        
        hdxl: [
          { required: true, message: "请选择最高学历", trigger: "change" },
        ],
      },
      btnname:"添加",
      page:{
        id:"",
        op:"add"
      },
    };
  },
  mounted () {
    this.initdata();
  },
  methods: {
    initdata(){
      var params=this.$route.params;
      console.log(params);
      this.page.id=params.id;
      this.page.op=params.op;
      this.get_detail();
    },
    get_detail(){
      var params={jsId:this.page.id};
      this.$http({
              url: this.$http.adornUrl('/xxjl/getJsXxjl'),
              method: 'get',
              params: this.$http.adornParams(params)
            }).then(({data}) => {
              console.log(data.data);
              if (data && data.code === 0) {
                if(data.data.length>0){
                  this.page.op="detail";
                  this.btnname="修改";
                  this.formModel=data.data[0];
                }else{
                  this.page.op="add";
                  this.btnname="添加";
                }
              } else {
                this.$message.error(data.msg)
              }
            })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //添加教师ID
          this.formModel.jsid=this.page.id;
          var formdata=new FormData();
          formdata.append("jsId",this.formModel.jsid);
          formdata.append("hdxl",this.formModel.hdxl);
          formdata.append("hdxlgj",this.formModel.hdxlgj);
          formdata.append("hdxxjgmc",this.formModel.hdxxjgmc);
          // formdata.append("academicName",this.formModel.academicName);
          formdata.append("sxzy",this.formModel.sxzy);
          formdata.append("rxsj",this.formModel.rxsj);
          formdata.append("bysj",this.formModel.bysj);
          formdata.append("xwsyny",this.formModel.xwsyny);

          //添加
          if(this.page.op=="add"){
            this.$http({
              url: this.$http.adornUrl('/xxjl/save'),
              method: 'post',
              data: formdata
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }else{//修改信息
            formdata.append("id",this.formModel.id);
            this.$http({
              url: this.$http.adornUrl('/xxjl/update'),
              method: 'post',
              data: formdata
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
          

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style >
.single {
  padding: 0.5rem;
}
.el_select {
  width: 15rem;
}
.btns{
  padding-left: 22rem;
}

</style>

